<div class="row mt-5 animated fadeInRight">
  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" narrower="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img
          src="http://static-xiaoguotu.17house.com/xgt/s/21/14632332161520729.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h2 class="text-danger">$99</h2>
        <h5 class="pink-text">
          <mdb-icon fas icon="utensils"></mdb-icon>
          配早晚餐
        </h5>
        <!--Title-->
        <h4 class="card-title">豪华城景大床房</h4>
        <!--Text-->

        <mdb-card-text>
          设施：书桌、熨衣设备、多种规格电源插座、110V电压插座、房内保险箱、空调、衣柜/衣橱、暖气、闹钟、针线包、220V电压插座、遮光窗帘、备用床具
          床具:鸭绒被、床具:毯子或被子、沙发、开夜床、电子秤、房间内高速上网、客房WIFI、衣架、餐桌、地毯
          面积：110平方米 楼层：2-4层 窗户：有窗 床型：一张2米大床
        </mdb-card-text>

        <a mdbBtn color="unique" class="waves-light" (click)="setRoomNo('豪华城景大床房');bookModal.show()" mdbWavesEffect>立即预定！</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" narrower="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://t9.baidu.com/it/u=2325067447,1060865972&fm=193"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h2 class="text-danger">$89</h2>
        <h5 class="pink-text">
          <mdb-icon fas icon="utensils"></mdb-icon>
          配早晚餐
        </h5>
        <!--Title-->
        <h4 class="card-title">豪华山景大床房</h4>
        <!--Text-->

        <mdb-card-text>
          面积：110平方米 楼层：2-4层 窗户：有窗 床型：一张2米大床
        </mdb-card-text>

        <a mdbBtn color="unique" class="waves-light" (click)="setRoomNo('豪华山景大床房');bookModal.show()" mdbWavesEffect>立即预定！</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" narrower="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img
          src="https://t8.baidu.com/it/u=3904766762,2399811568&fm=193"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h2 class="text-danger">$79</h2>
        <h5 class="pink-text">
          <mdb-icon fas icon="utensils"></mdb-icon>
          配早晚餐
        </h5>
        <!--Title-->
        <h4 class="card-title">豪华江景大床房</h4>
        <!--Text-->

        <mdb-card-text>
          面积：110平方米 楼层：2-4层 窗户：有窗 床型：一张2米大床
        </mdb-card-text>

        <a mdbBtn color="unique" class="waves-light" (click)="setRoomNo('23');bookModal.show()" mdbWavesEffect>立即预定！</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>
<div class="row mt-5 animated fadeInDown">
  <div class="col-md-4">
    <mdb-card>
      <!--Card image-->
      <mdb-card-img src="https://t9.baidu.com/it/u=223008186,660216539&fm=193"
                    alt="Card image cap"></mdb-card-img>
      <!--Card content-->
      <mdb-card-body>

        <!--Title-->
        <mdb-card-title>
          <h2 class="text-danger">$69</h2>
          <h4>雅致大床房</h4>
        </mdb-card-title>

        <!--Text-->
        <mdb-card-text> 拖鞋、浴室化妆放大镜、24小时热水、浴衣、独立淋浴间、吹风机、洗浴间电话。
        </mdb-card-text>

        <a mdbBtn color="primary" (click)="setRoomNo('24');bookModal.show()" mdbWavesEffect>立即预定！</a>
      </mdb-card-body>
    </mdb-card>
  </div>
  <div class="col-md-4">
    <mdb-card>
      <!--Card image-->
      <mdb-card-img src="https://t8.baidu.com/it/u=705644653,3297726343&fm=193"
                    alt="Card image cap"></mdb-card-img>
      <!--Card content-->
      <mdb-card-body>

        <!--Title-->
        <mdb-card-title>
          <h2 class="text-danger">$69</h2>
          <h4>摩天景观房</h4>
        </mdb-card-title>

        <!--Text-->
        <mdb-card-text> 遮光窗帘、手动窗帘、备用床具、床具:鸭绒被、房间内高速上网、
        </mdb-card-text>

        <a mdbBtn color="primary" (click)="setRoomNo('25');bookModal.show()" mdbWavesEffect>立即预定！</a>
      </mdb-card-body>
    </mdb-card>
  </div>
  <div class="col-md-4">
    <mdb-card>
      <!--Card image-->
      <mdb-card-img src="https://t7.baidu.com/it/u=3884788049,2481517386&fm=193"
                    alt="Card image cap"></mdb-card-img>
      <!--Card content-->
      <mdb-card-body>

        <!--Title-->
        <mdb-card-title>
          <h2 class="text-danger">$69</h2>
          <h4>豪华亲子房</h4>
        </mdb-card-title>

        <!--Text-->
        <mdb-card-text> 多种规格电源插座、空调、闹钟、针线包、220V电压插座、遮光窗帘、手动窗帘、备用床具、床具:鸭绒被、房间内高速上网、客房WIFI免费。
        </mdb-card-text>

        <a mdbBtn color="primary" (click)="setRoomNo('26');bookModal.show()" mdbWavesEffect>立即预定！</a>
      </mdb-card-body>
    </mdb-card>
  </div>
</div>
<div mdbModal #bookModal="mdbModal" class="modal mt-5 fade right"
     id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notify modal-info" role="document">
    <!--Content-->
    <div class="modal-content ">
      <!--Body-->
      <mdb-card cascade="true" narrower="true">
        <!--Card image-->
        <div
          class="view view-cascade gradient-card-header ripe-malinka-gradient narrower z-depth-2 rounded-lg  py-2 m-3 mt-n4 text-center">
          <div class="m-3">
            <h4 class="white-text">预定</h4>
          </div>
        </div>
        <!--/Card image-->
        <mdb-card-body>
          <!--Body-->

          <div class="md-form">
            <input type="text" id="formIdCard" class="form-control" [(ngModel)]="bookRoom.idCard"
                   mdbInput>
            <label for="formIdCard">身份证号</label>
          </div>

          <div class="md-form">
            <input type="text" id="formName" class="form-control" [(ngModel)]="bookRoom.name" mdbInput>
            <label for="formName">姓名</label>
          </div>

          <div class="md-form">
            <input type="text" id="formPhone" class="form-control" [(ngModel)]="bookRoom.phoneNo"
                   mdbInput>
            <label for="formPhone">用户电话</label>
          </div>

          <div class="md-form">
            <input type="text" id="formRoomNo" class="form-control" [(ngModel)]="bookRoom.roomNo" disabled
                   mdbInput>
            <label for="formRoomNo">客房号</label>
          </div>

          <div class="">
            <label for="formCheckInDate">入住时间</label><br>
            <input type="date" id="formCheckInDate" [(ngModel)]="bookRoom.checkInDate">
          </div>

          <div class="">
            <label for="formCheckOutDate">退房时间</label><br>
            <input type="date" id="formCheckOutDate"
                   [(ngModel)]="bookRoom.checkOutDate">
          </div>

          <div class="md-form">
            <input type="text" id="formComment" class="form-control"
                   [(ngModel)]="bookRoom.comment">
            <label for="formComment">备注</label>
          </div>


          <div class="text-center">
            <button mdbBtn class="btn blue-gradient" mdbWavesEffect (click)="book();bookModal.hide()">保存
            </button>
            <button mdbBtn class="btn peach-gradient" mdbWavesEffect (click)="bookModal.hide()">关闭
            </button>
          </div>

        </mdb-card-body>

      </mdb-card>
      <!--Form with header-->
    </div>
    <!--/.Content-->
  </div>
</div>
